<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css放在head标签 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">

</head>

<body>
    <div id="app">
        <!-- el-container一个容器 -->
        <el-container class="container">
            <!-- header头部 -->
            <el-header class="flex jc-sb aic">
                <span class="fff f16">电影后台管理系统</span>
                <span class="fff f16">影院模块</span>
                <div>
                    <span class="fff f16">张三</span>
                    <span class="fff f16">退出登录</span>
                </div>
            </el-header>
            <el-container>
                <!-- aside侧边栏 -->
                <el-aside width="200px">
                    <!-- menu面板 -->
                    <el-menu :default-openeds="['1', '3']">
                        <el-menu-item index="1">
                            <a href="./user.html">
                                <i class="el-icon-menu"></i>
                                <span>用户模块</span>
                            </a>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span>电影模块</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-menu"></i>
                            <span>影院模块</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-menu"></i>
                            <span>视频模块</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- main主体 -->
                <el-main>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix flex jc-sb aic">
                            <span class="f16">影院列表</span>
                            <el-button style="float: right; padding: 3px 0" type="text">新增电影</el-button>
                        </div>

                        <!-- 表格 -->
                        <el-table stripe border :data="tableData" style="width: 100%">
                            <el-table-column align="center" prop="name" label="影院名称">
                            </el-table-column>
                            <el-table-column align="center" prop="address" label="地址">
                            </el-table-column> 
                        </el-table>

                        <el-pagination @current-change="changePage" background layout="prev, pager, next"
                            :total="total">
                        </el-pagination>

                    </el-card>

                </el-main>
            </el-container>
        </el-container>
    </div>


    <!-- js放在body底部 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js"></script>
    <!-- elementUI库依赖vue.js, 所以要反正vue.js的后面 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var vm = new Vue({

            el: '#app',

            data: {
                total: 0,
                currPage: 1,
                pageSize: 30,
                tableData: [{
                    "latitude": 22.542472445357134,
                    "longitude": 114.02621045065386,
                    "id": 8119,
                    "name": "英皇电影城（东海缤纷店）",
                    "address": "深圳市福田区东海缤纷天地商场B1层",
                    "cityId": 440300,
                    "cityName": "深圳市",
                    "areaName": "福田区",
                    "areaId": 440304,
                    "lowPrice": 10400
                }]
            },

            created() {
                this.getList();
            },
            methods: {
                getList() {
                    let data = {
                        params: {
                            pageSize: this.pageSize,
                            currPage: this.currPage,
                        }
                    }
                    axios.get('http://81.71.65.4:3008/cinema/list', data).then(res => {
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    })
                },

                changePage() {
                    this.currPage = this.currPage + 1;
                    this.getList();
                }
            }

        })
    </script>
</body>

</html>